import { observable, makeObservable, action } from 'mobx'
import { IMenuRoutes } from '@/router/element.tsx'
import layout from "@/router/layout.tsx";
import _ from 'lodash'
export enum EState {
    dialog = 'dialog',
    page = 'page'
}
export interface IMenuTabs {
    key: string
    label: string
    closeIcon: boolean
}

export enum EMenuType {
    remove = 'remove',
    add = 'add'
}

class Menu {
    constructor() {
        makeObservable(this, {
            collapsed: observable,
            menuState: observable,
            menuTabs: observable,
            delActiveTabKey: observable,
            activeMenuTabKey: observable,
            setCollapsed: action.bound,
            changeCollapsed: action.bound,
            changeMenuState: action.bound
        })
    }
    // 菜单是否折叠
    collapsed: boolean = false
    // 菜单状态, 页面显示或者弹窗显示
    menuState: EState = EState.page
    // 菜单tabs
    menuTabs: Array<IMenuTabs> = [{ label: '工作台', key: '/dashboard/workplace', closeIcon: false }]
    // 选中的tabs key
    activeMenuTabKey: string = '/dashboard/workplace'
    // 删除之后选中的前一个key
    delActiveTabKey: string = ''
    setCollapsed() {
        this.collapsed = !this.collapsed
    }
    changeCollapsed(collapsed: boolean) {
        this.collapsed = collapsed
    }
    changeMenuState(state: EState) {
        this.menuState = state
    }
    changeActiveMenuTabKey(activeKey: string) {
        this.activeMenuTabKey = activeKey
        this.menuTabs.map((item, index) => {
            if (index !== 0) {
                item.closeIcon = item.key === activeKey
            }
            return item
        })
    }
    pathToTabItem(path: string, type: EMenuType) {
        if (path === '/') return
        const pathList = path.split('/').filter(item => item !== '')
        let elementList: Array<IMenuRoutes> = _.cloneDeep(layout.children) as Array<IMenuRoutes>
        let elementItem: IMenuRoutes | undefined
        for (let i = 0; i < pathList.length; i++) {
            if (!elementList.filter(item => item.path === pathList[i])[0].children) {
                elementItem = _.cloneDeep(elementList.filter(item => item.path === pathList[i])[0]) as IMenuRoutes
                break
            } else {
                elementList = _.cloneDeep(elementList.filter(item => item.path === pathList[i])[0].children) as Array<IMenuRoutes>
            }
        }
        elementItem && this.changeMenuTabs({ key: elementItem.key, label: elementItem.label, closeIcon: true } as IMenuTabs, type)

    }
    changeMenuTabs(tabsItem: IMenuTabs | string, type: EMenuType) {
        switch (type) {
            case EMenuType.add:
                if(this.menuTabs.filter(item => item.key === (tabsItem as IMenuTabs).key).length === 0) {
                    this.menuTabs.push(tabsItem as IMenuTabs)
                }
                this.changeActiveMenuTabKey((tabsItem as IMenuTabs).key)
                return
            case EMenuType.remove:
                let delIndex: number = 0
                this.menuTabs = this.menuTabs.filter((item, index) => {
                    if (item.key === tabsItem) {
                        delIndex = index
                    }
                    return item.key !== tabsItem as string
                })
                this.delActiveTabKey = this.menuTabs[delIndex - 1].key
                this.changeActiveMenuTabKey(this.menuTabs[delIndex - 1].key)
        }
    }
}

export default new Menu()